<template>
	<view class="body">
		<view class="block">
			<i class="ali-icon icon-color body-form-icon">&#xea98;</i>
			<input class="body-form-input" name="input" placeholder="请输入卡号" :value="cardNumber" @input="getCardNumber" />
			<i class="ali-icon body-form-icon" style="color:#dedede" @tap="clear('cardNumber')">&#xe604;</i>
		</view>
		<view class="block">
			<i class="ali-icon icon-color body-form-icon">&#xe6b7;</i>
			<input class="body-form-input" name="input" placeholder="请输入账号" :value="cardAccount" @input="getCardAccount" />
			<i class="ali-icon body-form-icon" style="color:#dedede" @tap="clear('cardAccount')">&#xe604;</i>
		</view>
		<view class="block">
			<i class="ali-icon icon-color body-form-icon">&#xe60e;</i>
			<input class="body-form-input" name="input" placeholder="请输入卡密" :value="cardSecret" @input="getCardSecret" />
			<i class="ali-icon body-form-icon" style="color:#dedede" @tap="clear('cardSecret')">&#xe604;</i>
		</view>
		<view class="bottom-btn">
			<button type="primary" @click="checkCardAccount" class='btn-next'>下一步</button>
		</view>
		<uni-popup ref="popup" type="bottom">
			<view class="popup-block">
				<view class="body-popup-title">{{mealName}}</view>
				<view class="body-form-item" style="margin-top: 20px;">
					<view class="body-form-label1">生效时间</view>
					<view class="body-form-value1">
						<radio-group class="radio-group" @change="timeChange" >
							<label class="radio"><radio color="#78A8F2" style="transform:scale(0.7);font-size: 28upx;" value="NO" :checked="status=='NO'" />本月</label>
							<label class="radio"><radio color="#78A8F2" style="transform:scale(0.7);font-size: 28upx;margin-left: 20px;" value="YES" :checked="status=='YES'" />次月</label>
						</radio-group>
					</view>
				</view>
				<view class="block_code">
					<view class="view_code">
						<i class="ali-icon icon-color body-form-icon">&#xe6bf;</i>
						<input class="body-form-input1" name="input" placeholder="请输入验证码" :value="code" @input="getCode" />
						<i class="ali-icon body-form-icon" style="color:#dedede" @tap="clear('code')">&#xe604;</i>
					</view>
					<view class="body-form-code">
						<image :src="url" mode="widthFix" @click="getCodeImg"></image>
					</view>
				</view>
				<!-- <view class="body-form-item" style="margin-top: 20px;">
					<view class="body-form-label1">生效时间</view>
					<view class="body-form-value1">
						<radio-group class="radio-group" @change="timeChange" >
							<label class="radio"><radio color="#78A8F2" style="transform:scale(0.7);font-size: 28upx;" value="NO" :checked="status=='NO'" />本月</label>
							<label class="radio"><radio color="#78A8F2" style="transform:scale(0.7);font-size: 28upx;margin-left: 20px;" value="YES" :checked="status=='YES'" />次月</label>
						</radio-group>
					</view>
				</view>
				<view class="body-form-item">
					<view class="body-form-value2">
						<input class="body-form-input1" name="input" placeholder="请输入验证码" :value="code" @input="getCode"/>
					</view>
					<view class="body-form-code">
						<image :src="url" mode="widthFix" @click="getCodeImg"></image>
					</view>
				</view> -->
				<view class="body-popup-btn">
					<button type="primary" @click="onSubmit" class='btn-next'>提交</button>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				cardNumber: '',
				cardAccount: '',
				cardSecret: '',
				url: '',
				encryptedString: '',
				mealName: '',
				status: '',
				code: '',
				showLogo: false,
			}
		},
		mounted() {
			let local = location.href; 
			if(local.indexOf('192.168.1.107')>0||local.indexOf('//iot.1688iot.vip/')>0){
				this.showLogo = true;
			}
			this.getCodeImg();
		},
		methods: {
			onSubmit(){
				if(this.status==''){
					uni.showToast({
					   title: '请选择生效类型',
					   icon: 'none',
					   duration: 2000		
					});
					return false
				}
				if(this.code==''){
					uni.showToast({
					   title: '请填写验证码',
					   icon: 'none',
					   duration: 2000		
					});
					return false
				}
				this.$req.userRecharge('customer-order/updateSecret/imgcheck',{
					cardNumber: this.cardNumber,	//卡号
					id: this.cardAccount,			//账号
					secretStr: this.cardSecret,		//卡密
					dictIsPreStorage: this.status,	//生效时间
					imgCode: this.code,				//验证码
					uid: this.encryptedString,
				}).then(res=>{
					if(res.data){
						uni.showToast({
						   title: '兑换成功',
						   icon: 'success',
						   duration: 2000		
						});
						this.cardNumber = '';
						this.cardAccount = '';
						this.cardSecret = '';
						this.status = '';
						this.$refs.popup.close();
					}
				})
				this.code = '';
				this.encryptedString = '';
				this.url = '';
				this.getCodeImg()
			},
			checkCardAccount() {
				if(this.cardNumber==''){
					uni.showToast({
					    title: '请填写卡号',
						icon: 'none',
					    duration: 2000						
					});
					return false
				}
				if(this.cardAccount==''){
					uni.showToast({
					   title: '请填写账号',
					   icon: 'none',
					   duration: 2000		
					});
					return false
				}
				if(this.cardSecret==''){
					uni.showToast({
					    title: '请填写卡密',
					    icon: 'none',
					    duration: 2000		
					});
					return false
				}
				this.$req.userRecharge('customer-order/checkSecret',{
					cardNumber: this.cardNumber,
					id: this.cardAccount
				}).then(res=>{
					if(res.data&&res.data.mealName){
						this.mealName = res.data.mealName;
						this.code = '';
						this.encryptedString = '';
						this.url = '';
						this.getCodeImg();
						this.$refs.popup.open();
					}
				})
			},
			timeChange(e){
				this.status = e.target.value;
			},
			getCodeImg() {
				this.$req.sendCheck('code/send/pictureCode/uid', {}).then(res => {
					if (res._result) {
						this.encryptedString = res.data
						this.url = '/api/oceanside-send-and-check/code/send/pictureCode/' + res.data
					}
				})
			},
			getCardNumber(e){
				this.cardNumber = e.detail.value;  
			},
			getCardAccount(e){
				this.cardAccount = e.detail.value;  
			},
			getCardSecret(e){
				this.cardSecret = e.detail.value;  
			},
			getCode(e){
				this.code = e.detail.value;  
			},
			clear(inputName){
				return this[inputName]='';
			}
		}
	}
</script>

<style>
	.body{
		width: 90%;
		height: 90%;
		background-color: #fff;
		position: relative;
		top: 0;
		left: 0;
		margin: 0;
		padding: 0;
		padding: 10% 5%;
	}
	.block{
		width: auto;
		height: 90upx;
		position: relative;
		top: 0;
		left: 0;
		border: 1px solid #007AFF;
		border-radius: 5px;
		display: flex;
		justify-content: flex-start;
		align-items: center;
		margin-bottom: 20px;
	}
	.body-form-icon{
		width: 9vw;
		height: 100%;
		position: relative;
		display: inline-flex;
		justify-content: center;
		align-items: center;
	}
	.body-form-input{
		width: 80%;
		height: 60upx;
		line-height: 80upx;
		outline: none;
		border-radius: 5px;
		padding: 10upx 20upx;
		font-size: 28upx;
	}
	.block_code{
		width: 100%;
		height: 90upx;
		position: relative;
		top: 0;
		left: 0;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
	.view_code{
		width: 60vw;
		height: 100%;
		position: relative;
		display: inline-flex;
		justify-content: space-between;
		align-items: center;
		border: 1px solid #007AFF;		
		border-radius: 5px;
	}
	.body-form-input1{
		width: 42vw;
		height: 60upx;
		line-height: 80upx;
		outline: none;
		background-color: white;
		border-radius: 5px;
		font-size: 28upx;
	}
	.body-form-code{
		width: 28vw;
		height: 51px;
		display: inline-flex;
		position: relative;
		justify-content: flex-end;
		align-items: center;
	}
	.body-form-code image{
		width: 100%;
		height: auto;
	}
	.fixed-div {
		width: 100%;
		height: 17vw;
		position: fixed;
		top: 70%;
		left: 0;
		z-index: 10;
	}
	
	.fixed-div image {
		width: 40%;
		height: auto;
		margin-left: 50%;
	}
	.bottom-btn{
		width: 90%;
		height: 205px;
		position: fixed;
		bottom: 0;
		left: 5%;;
	}
	.btn-next{
		width: 100%;
		height: 90upx;
		line-height: 90upx;
		margin: 80px 0;
		box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
		background-color: #007AFF;
		border: 1px solid #007AFF;
		color: #fff;
	}
	/* 弹出框样式 */
	.popup-block{
		width: 90%;
		height: auto;
		position: relative;
		background-color: #FFFFFF;
		padding: 10px 5%;
	
	}
	.body-popup-title{
		width: 100%;
		height: 80upx;
		position: relative;
		font-size: 36upx;
		border-bottom: 1px dashed #78A8F2;
		line-height: 70upx;
		font-weight: bold;
		color: #78A8F2;
		margin-bottom: 20px;
	}
	.body-popup-btn{
		width: 100%;
		height: 200upx;
		display: flex;
		align-items: center;
		justify-content: center;
	}
	.body-form-item{
		width: 100%;
		height: auto;
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 20px;
	}
</style>
